<template>
  <div class="comment-box">
    <AsideTitle :headeline="headeline" :icon="icon"></AsideTitle>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待审批" name="first"></el-tab-pane>
        <el-tab-pane label="已审批" name="second"></el-tab-pane>
      </el-tabs>
      <!-- 表格区域 -->
      <el-table border stripe :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" v-if="tableData.length > 0">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="评论人" prop="userName"></el-table-column>
        <el-table-column label="评论内容" prop="content" width="350px">
          <template slot-scope="scope">
            <div class="contentShow" v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column label="评论时间" prop="createTime">

        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.auditStatus == 0" class="handlebtn" @click="Fnapproval(scope.row)">审批</el-button>
            <el-button class="handlebtn" type="danger" size="mini" icon="el-icon-delete" @click="delComment(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pag">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>
    <!-- <el-button @click="model.dialogVisible = true">按钮</el-button> -->
    <!-- 弹框审批 -->
    <el-dialog title="评论审批" :visible.sync="model.dialogVisible" width="42%">
      <div class="approval_content">
        <span>评论内容</span>
        <div> {{model.appObj.content}}</div>
      </div>
      <div class="approval_box">
        <el-radio-group v-model="model.radio">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="model.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="flagBtn"> 确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AsideTitle from "@/components/asideTitle";
import { dateFtt } from '@/utils/formatTime'
export default {
  components: {
    AsideTitle
  },
  data() {
    return {
      headeline: "评论管理",
      icon: "fa-comment",
      activeName: 'first',
      tableData: [], //表格数据
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        auditStatus: 0

      },
      total: 1,
      model: {
        dialogVisible: false,
        radio: '',
        appObj: {}
      },
      
      flagBtn:false,

      userId: JSON.parse(window.sessionStorage.getItem('usrObj')).id
    }
  },
  mounted() {
    this.fngetAuditCommentPage(this.queryInfo)
  },
  methods: {
    // tabs切换
    handleClick(tab) {
      switch (tab.name) {
        case 'first':
          this.queryInfo.auditStatus = 0
          this.fngetAuditCommentPage(this.queryInfo)
          break;
        case 'second':
          this.queryInfo.auditStatus = 1
          this.fngetAuditCommentPage(this.queryInfo)
          break
      }
    },
    //获取数据
    async fngetAuditCommentPage(arg) {
      this.tableData = []
      let { data } = await this._API.getAuditCommentPage(arg)

      if (data && data.code == 0 && data.state == 200) {
        data.data.list.forEach(e => {
          this.tableData.push({
            userName: e.userName,
            content: e.content,
            createTime: dateFtt("yyyy-MM-dd hh:mm:ss", new Date(e.createTime)),
            articleId: e.articleId,
            customerId: e.customerId,
            auditStatus: e.auditStatus,
            id: e.id
          })
        })
        this.total = data.data.total

      }
    },
    //点击删除
    async delComment(val) {
      let confirmResult = await this.$confirm(
        "此操作将永久删除该评论, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除！");
      }

      console.log(val);
      let { data: res } = await this._API.deleteComment({
        id: val.id,

      });


      if (res.code == 0 && res.state == 200) {
        this.$message.success("删除成功");
        if (val.auditStatus == 0) {
          this.queryInfo.auditStatus = 0
          this.fngetAuditCommentPage(this.queryInfo)
        } else {
          this.queryInfo.auditStatus = 1
          this.fngetAuditCommentPage(this.queryInfo)
        }


      }
    },
    //审批评论 
    Fnapproval(val) {

      this.model.appObj = val
      this.model.dialogVisible = true
    },
    //提交审批
    async handleSubmit() {
        
      if (this.model.radio == '') {
        return this.$message.warning('请选择审批结果')
      }
      this.flagBtn = true 
      let { data } = await this._API.auditComment(
        {
          auditStatus: this.model.radio,
          id: this.model.appObj.id,
          auditUser: this.userId

        })

      if (data.code == 0 && data.state == 200) {
        this.flagBtn = false
        this.$message.success(data.data)
        this.queryInfo.auditStatus = 0
        this.fngetAuditCommentPage(this.queryInfo)
        this.model.dialogVisible = false
      }else {
          this.flagBtn = false
      }
      
    },
    //切换每页数据
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.fngetAuditCommentPage(this.queryInfo)

    },
    //切换到多少页
    handleCurrentChange(newNum) {
      this.queryInfo.pageNum = newNum;
      this.fngetAuditCommentPage(this.queryInfo)

    },

  }
}
</script>

<style scoped lang="scss">
.contentShow {
  height: 150px;
  line-height: 80px;
  width: 350px;
  overflow: hidden;
}
.approval_content {
  margin: 10px 0;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  div {
    margin-top: 10px;
  }
}
.approval_box {
  text-align: center;
  font-size: 16px;
}
</style>